<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
            margin: 0 auto;
        }
        div table td {
            width: 20px;
            height: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<div id="box">

</div>
<script>
    var i = 0;
    var s= '<table border="1">';
        while (i<4){
           s = s + '<tr>';

           console.log(i+'****************************');

            var j = 0;
            while (j<4){
                s += '<td></td>'
                console.log(j);
                j++;
            }

           s = s+'</tr>';
            i++;
        }

    s += '</table>'
    var box = document.getElementById('box');
        box.innerHTML = s;
</script>
</body>
</html>